<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }

        html,body{
            height: 100%;
            margin-left: 6%;
            margin-top: 2%;
        }

        #cart{
            display: flex;
            position: relative;
        }

        #item{
            flex: 1;
            width: 289px;
            height: 287px;
            position: relative;
        }

        .info{
            /* position: absolute; */
            margin-left: 15px;
        }

        #btn{
            position: absolute;
            left:32% ;
            top: 92%;
            
        }

        #btn button{
            border: solid 1px #ccc;
            height: 25px;
            width: 50px;
            border: none;
            border-radius: 10px;
        }

        #prices{
            position: absolute;
            right: 10%;
            top: 110%;
        }
    </style>
</head>
<body>
    
    <div id="app">
        <div id="cart">
            <phone @add="addHandler" @del="delHandler"
            v-for="item in phones" :phone="item" v-if="item.number!=0"></phone>
            <div id="prices">
                总价：{{totalprice}}
            </div>
        </div>
    </div>

    <script>

        Vue.component("phone",{
            props:["phone"],
            template:`              
                <div id="item">
                    <div><img :src="phone.imgurl" :alt="phone.name"></div>
                    <div class="info">{{phone.name}}</div>
                    <div class="info">价格：{{phone.price}}</div>
                    <div class="info">库存：{{phone.number}}</div>
                    <div id="btn">
                        <button @click="add(phone.id)">库存+1</button>
                        <button @click="del(phone.id)">库存-1</button>
                    </div>
                    
                </div>
            `,
            methods:{
                add(id){
                    this.$emit("add",id)
                },
                del(id){
                    this.$emit("del",id)
                }
            }
        })

        new Vue({
            el:"#app",
            data:{
                phones:[
                    {id:0,name:"IPhone X",price:5500.0,number:1,imgurl:"./imgs/x.png"},
                    {id:1,name:"IPhone Xs",price:6500.0,number:1,imgurl:"./imgs/xs.png"},
                    {id:2,name:"IPhone Xr",price:4500.0,number:1,imgurl:"./imgs/xr.png"},
                    {id:3,name:"IPhone 11Pro",price:8500.0,number:1,imgurl:"./imgs/11p.png"},
                ]
            },
            computed:{
                totalprice(){
                    var prices = 0
                    for(phone of this.phones){
                        prices += phone.price * phone.number
                    }

                    return prices
                }
            },
            methods:{
                addHandler(id){
                    for(phone of this.phones){
                        console.log(id,phone)
                        if(phone.id === id){
                            phone.number++
                        }
                    }
                },
                delHandler(id){
                    for(phone of this.phones){
                        if(phone.id === id){
                            phone.number--
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>